<template>
    <van-nav-bar title="个人信息管理" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="top">
        昵称
    </div>
    <div class="main" v-for="item in data" :key="item.title">
        <p>{{ item.title }}</p>
        <van-cell-group inset>
            <van-cell v-for="i in item.data" :key="i.title" :title="i.title" :to="i.path" is-link center size="large" />
        </van-cell-group>
    </div>
    <br>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const onClickLeft = () => history.back();

let data = ref([
    { title: '账号信息', data: [{ title: '手机号码', path: '#' }, { title: '登录密码', path: '#' }] },
    { title: '实名信息', data: [{ title: '证件信息', path: '/idCard' }, { title: '监护人信息', path: '#' }] },
    { title: '常用功能', data: [{ title: '紧急联系人', path: '#' }, { title: '通勤设置', path: '#' }] },
    { title: '通用信息', data: [{ title: '开票信息', path: '#' }, { title: '位置信息', path: '#' }] },
    { title: '其他个人信息', data: [{ title: '打车个人信息', path: '#' }, { title: '代驾个人信息', path: '#' }, { title: '两轮车个人信息', path: '#' }, { title: '货运个人信息', path: '#' }, { title: '加油个人信息', path: '#' }, { title: '充电个人信息', path: '#' }, { title: '养车个人信息', path: '#' }, { title: '公交地铁个人信息', path: '#' }, { title: '火车票个人信息', path: '#' }, { title: '滴滴出游个人信息', path: '#' }] },
])
</script>

<style scoped>
.top {
    font-size: 20px;
    font-weight: 700;
    padding: 10px 20px;
    background-color: white;
}

.main p {
    margin-left: 35px;
    font-size: 14px;
    color: #4D4D4D;
}
</style>